<template>
  <div class="box">
    <div class="demo-progress ">
      <div class="flex">
        <img class="teacher" src="../../../assets/teacher.gif" alt="">
        <div class="chatBox">{{ conTip }}</div>
      </div>
      <div class="next flex">
        <span class="mr-4 mt-2 ml-4">下一题</span>
        <!-- <button>{{ conTip }}</button> -->
        <el-progress width="100" :text-inside="false" :stroke-width="20" :percentage="percentage2" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
const conTip = ref<any>([])
const ranCon = () => {
  const randomNum = Math.floor(Math.random() * 6);
  conTip.value = conData.value[randomNum].con
}
const conData = ref([
  {
    id: 0,
    con: "定期修剪和修整植物：定期修剪和修整植物可以保持园林的整洁和有序。修剪可以控制植物的生长，使其保持适当的形状和大小。此外，修整植物也有助于促进植物的健康生长和花芽的形成。"
  },
  {
    id: 0,
    con: "使用有机肥料：选择有机肥料可以提供植物所需的营养，同时减少对环境的负面影响。有机肥料富含有机物质，可以改善土壤结构和水分保持能力，促进植物的生长和健康。"
  },
  {
    id: 0,
    con: "灌溉管理：合理的灌溉管理是园林管理的关键。根据植物的需求和当地的气候条件，制定合适的灌溉计划。避免过度浇水或缺水，以确保植物得到足够的水分，同时避免浪费水资源。"
  },
  {
    id: 0,
    con: "杂草控制：定期清除园区内的杂草可以保持园林的整洁和美观。使用合适的方法，如手工拔除、覆盖杂草或使用无害的除草剂来控制杂草的生长。"
  },
  {
    con: "病虫害管理：密切观察植物是否受到病虫害的侵害，并采取适当的控制措施。这可能包括使用有机或化学农药、引入益虫或使用其他病虫害管理方法。"
  }
])
const percentage2 = ref(0)

setInterval(ranCon, 10000)
onMounted(() => {
  ranCon()
  setInterval(() => {
    percentage2.value = (percentage2.value % 100) + 1
  }, 100)
})
</script>

<style scoped lang="scss">
.box {
  position: relative;

  .teacher {
    // position: absolute;
    // left: 5;
    // top: 5;
    width: 15rem;
    height: 15rem;
    // border: 1px solid red;
  }

  .chatBox {
    padding: 1rem;
    width: 20rem;
    height: 13rem;
    font-size: 20px;
    color: greenyellow;
    line-height: 30px;
  }

}


.demo-progress .el-progress--circle {
  margin-right: 15px;
}

.demo-progress .el-progress--line {
  margin-bottom: 15px;
  width: 350px;
}
</style>
